[feat/CK-147] 골룸 생성 페이지 고도화 및 유효성 검사를 구현한다 #114

jw-r · 2023-08-14T07:15:07Z

📌 작업 이슈 번호

CK-147

✨ 작업 내용

useFormInput 고도화
골룸 생성 validation
골룸 생성 노드 데이터 맵핑
InputField 컴포넌트 생성
인원수 Input 항목 추가

💬 리뷰어에게 남길 멘트

혹여나 잘 이해가 가지 않는 부분이 있다면 언제든 말씀해주세요
화면공유하고 따로 설명드리겠습니다😭

잘 부탁드립니다!

2023-08-14.4.05.00.mov

…/2023-co-kirikiri into feature/CK-147

sh981013s

커밋 기록을 다 보며 확인했는데 계속 훅이 진화하는게 인상적이었어요! ㅋㅋㅋㅋㅋ

너무 고생하셨고, 리뷰 내용만 확인 부탁드려요! vㅔ리 굳입니다!!

영상을 보았을 때 하나의 input validation 만 실패하더라도 form 에 있는 모든 Input 의 validation 이 실패하는 것처럼 보이는 것 같은데 맞나용?

sh981013s · 2023-08-14T07:24:21Z

client/src/tests/utilTests/isCurrentOrFutureDate.test.ts

+import { isCurrentOrFutureDate } from '@utils/_common/isCurrentOrFutureDate';
+
+it('과거의 날짜를 입력하면 false를 반환한다', () => {
+  const isValidateDate = isCurrentOrFutureDate('2022-03-14');
+
+  expect(isValidateDate).toBe(false);
+});


순수하게 궁금한게 이 하나의 테스트로 테스트 커버리지가 80% 이상이 나왔었나용?? 😮

sh981013s · 2023-08-14T07:34:41Z

client/src/hooks/_common/useFormInput.ts

  const [formState, setFormState] = useState<T>(initialState);
+  const [error, setError] = useState<FormErrorType>();


초기 값을 넣어주지 않아 undefined 가 나올경우가 있을 것 같네요..! null 값이나 {} 빈 객체를 초기 값으로 할당하는 것은 어떨까요? 🫡

sh981013s · 2023-08-14T07:36:54Z

client/src/hooks/_common/useFormInput.ts

@@ -45,7 +129,6 @@ const useFormInput = <T extends object>(initialState: T) => {
            },
          };


로대쉬가 그리워지는 로직이군요..! 😀

sh981013s · 2023-08-14T07:37:56Z

client/src/hooks/_common/useFormInput.ts

+          return (currentValue as any)[part];
+        }, formState);
+
+        const isValid = validate(String(fieldValue));


validateInputValue 와 handleSubmit 함수에서 유효성 검사 로직이 중복되는 것처럼 보이는데 의도된 상황일까여?? 🙂

sh981013s · 2023-08-14T07:38:52Z

client/src/hooks/_common/useFormInput.ts

@@ -62,6 +145,8 @@ const useFormInput = <T extends object>(initialState: T) => {
    formState,
    handleInputChange,
    resetFormState,
+    error,
+    handleSubmit,
  };
 };



배열 핸들링이 코드에 들어가 살짝 복잡해지는 감이 있는데, 아래와 같이 분리해보는건 어떨까여?? 😁

const handleArrayUpdate = (baseName: string, arrayIndex: string, arrayPropName: string) => { // 배열 업데이트 로직 };

sh981013s · 2023-08-14T07:50:11Z

client/src/hooks/_common/useFormInput.ts

 };

 const useFormInput = <T extends object>(
  initialState: T,
  validations?: ValidationsType
 ) => {
  const [formState, setFormState] = useState<T>(initialState);
-  const [error, setError] = useState<FormErrorType>();
+  const [error, setError] = useState<FormErrorType>({});


엇 아까 리뷰 남겼던 부분이 여기서 이미 해결이 되었군요..!!! 👍👍👍👍

sh981013s · 2023-08-14T07:51:23Z

client/src/hooks/_common/useFormInput.ts

-        };
-      });
-    }
+    if (isFormValid()) callback();


callback 보다는 callbackFn 혹은 callbackFunction 같이 조금 더 명시적이면 인자로 받은 콜백 함수겠구나~ 하고 판단하기 조금 더 편하지 않을까 생각이 드네요! 어떻게 생각하시나용

sh981013s · 2023-08-14T07:52:37Z

client/src/utils/_common/isEmptyString.ts

@@ -0,0 +1 @@
+export const isEmptyString = (value: string) => value.length === 0;


음 개인적으로 유틸 함수의 경우에는 팀원 모두가 자주 쓰게 될 것 같아서 모두 간단한 설명과 사용예시를 담은 주석을 추가하는건 어떨까용?? 😀

sh981013s · 2023-08-14T07:52:58Z

client/src/utils/_common/isNumeric.ts

@@ -0,0 +1 @@
+export const isNumeric = (value: string) => /^[1-9]+\d*$/.test(value);


주석 부탁려용~~

sh981013s · 2023-08-14T07:53:02Z

client/src/utils/_common/isValidMaxLength.ts

@@ -0,0 +1,3 @@
+export const isValidMaxLength = (value: string, max: number) => {
+  return value.length <= max;


주우썩 부탁드려용~~

NaveOWO · 2023-08-14T14:00:42Z

client/src/components/_common/InputField/InputField.tsx

+          <textarea
+            id={props.name}
+            name={props.name}


id는 왜 지정해준건지 궁금해요!!

NaveOWO · 2023-08-14T14:09:45Z

client/src/components/_common/InputField/InputField.tsx

+  style?: { [key: string]: string };
+};
+
+const InputField = ({ ...props }: InputFieldProps) => {


여러 props를 받아서 Input을 사용할 수 있게 한거 너무 좋은 것 같아요!! 우디 고민한 티가 많이나고 너무 수고많았어요ㅠㅠ 조금 더 다듬어서 서비스 내 모든 input에 적용해켜봅시당!!
지금 당장은 아니고 리팩토링할 때 했으면 하는 부분들 여기에 정리해놨습니다!
https://www.notion.so/d0b3ea6e9cf44703ab9c3a10bb6e1b96

NaveOWO · 2023-08-14T14:12:49Z

client/src/hooks/_common/useFormInput.ts


-const useFormInput = <T extends object>(initialState: T) => {
+export type FormErrorType = {


타입 선언부 모두 myTypes 폴더로 분리 하는게 좋을 것 같아요~!

NaveOWO · 2023-08-14T14:29:43Z

client/src/hooks/_common/useFormInput.ts

+  const [error, setError] = useState<FormErrorType>({});
+
+  const validateInputValue = (name: string, inputValue: string) => {
+    if (typeof validations?.[name] !== 'function') return true;


타입 선언부를 보면 validations는 함수를 string인 key와 function인 value를 갖는 객체인 것 같은데, value의 타입이 'function'이 아닌 경우는 왜 구분해준건지 궁금해요!

NaveOWO · 2023-08-14T15:56:15Z

client/src/hooks/_common/useFormInput.ts

+export type ValidationReturnType = {
+  ok: boolean;
+  message?: string;
+  updateOnFail?: boolean;
+};


이 타입도 조건부로 선언해야할 것 같아요! ok가 true일 때는 message는 있으면 안되고, ok가 false일 때만 message가 ValidationFunctionType의 반환값에 들어있어야 하는게 아닌가요?!

NaveOWO · 2023-08-14T15:57:10Z

client/src/hooks/_common/useFormInput.ts

+    Object.keys(validations).forEach((key) => {
+      const result = validations[key](String(getNestedValue(formState, key)));


객체의 정확한 타입 추론을 위해서 util 폴더의 invarientType에 있는 유틸함수르 이용해서 object.keys()를 사용해주세요!

NaveOWO

우디 너무너무 수고햐셨어요~~!~~!!!! 코멘트 확인해주세요~~!

sh981013s

vㅔ리 굳이에용~~

jw-r added 20 commits August 8, 2023 16:08

feat: 입력받은 날짜가 현재를 기준으로 유효한지 판별하는 함수 구현

9a5bad7

Merge branch 'develop-client' of https://github.com/woowacourse-teams…

135104a

…/2023-co-kirikiri into feature/CK-147

feat: onChange가 발생했을 때, onSubmit이 발생했을 때 유효성 검사를 수행하도록 Hook 확장

f9cf402

chore: handleSubmit 함수에 대한 주석 추가

175df49

feat: 코끼리끼리 InputField 구현

ca66909

design: number 타입일 떄의 스타일 추가

dd05190

design: form을 section 별로 분리 및 스타일 재조정

6d27e76

feat: 객체 내부의 yyyy-mm-dd 형식의 문자열을 yyyymmdd 형태로 변환하는 함수 구현

84cb937

refactor: 외부에서 handleInputChange 함수의 타입과 에러 객체의 타입에 접근할 수 있도록 변경

3678e9b

refactor: 각 Input의 validation을 하나의 함수로 작성하도록 리펙토링

8c02fa9

refactor: useFormInput 중복 로직 제거 리펙토링

06a12b8

refactor: validation 객체의 메서드 내부에서 모든 유효성 검사 로직을 수행하도록 변경

fffff00

design: 에러 메시지가 잘리지 않도록 스타일 수정

36e7bfc

feat: any 타입을 최소화하도록 타입 리펙토링

a765fb1

refactor: validation utils 함수 분리 및 테스트 코드 작성

419ffde

feat: isValidMaxValue 함수 구현 및 테스트 코드 작성

7759c78

feat: 인원수에 대한 Input 추가

d5728d4

refactor: validation의 매직넘버와 에러 메시지를 상수화

5d864ce

feat: InputField에 textarea 태그를 조건 분기로 추가

cfec4a6

refactor: 로드맵 Info 맵핑

7292a5a

jw-r added feature 🔅 Improvements or additions to documentation FE 👨‍👨‍👧 FrontEnd labels Aug 14, 2023

jw-r requested review from sh981013s and NaveOWO August 14, 2023 07:15

jw-r self-assigned this Aug 14, 2023

sh981013s requested changes Aug 14, 2023

View reviewed changes

NaveOWO reviewed Aug 14, 2023

View reviewed changes

NaveOWO approved these changes Aug 15, 2023

View reviewed changes

sh981013s self-requested a review August 15, 2023 05:20

sh981013s approved these changes Aug 15, 2023

View reviewed changes

sh981013s merged commit 791dd5b into develop-client Aug 15, 2023
1 check passed

sh981013s deleted the feature/CK-147 branch August 15, 2023 05:21

Cl8D added this to the 6주차 스프린트 (08/14 ~ 08/20) milestone Aug 15, 2023

sh981013s linked an issue Aug 17, 2023 that may be closed by this pull request

골룸 생성 시 날짜 입력들이 placeholder가 아닌 것 같아요 #92

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feat/CK-147] 골룸 생성 페이지 고도화 및 유효성 검사를 구현한다 #114

[feat/CK-147] 골룸 생성 페이지 고도화 및 유효성 검사를 구현한다 #114

jw-r commented Aug 14, 2023

sh981013s left a comment •

edited

Loading

sh981013s Aug 14, 2023

sh981013s Aug 14, 2023

sh981013s Aug 14, 2023

sh981013s Aug 14, 2023

sh981013s Aug 14, 2023

sh981013s Aug 14, 2023

sh981013s Aug 14, 2023

sh981013s Aug 14, 2023

sh981013s Aug 14, 2023

sh981013s Aug 14, 2023

NaveOWO Aug 14, 2023

NaveOWO Aug 14, 2023

NaveOWO Aug 14, 2023

NaveOWO Aug 14, 2023

NaveOWO Aug 14, 2023

NaveOWO Aug 14, 2023

NaveOWO left a comment

sh981013s left a comment

		const [formState, setFormState] = useState<T>(initialState);
		const [error, setError] = useState<FormErrorType>();

		@@ -45,7 +129,6 @@ const useFormInput = <T extends object>(initialState: T) => {
		},
		};

		@@ -0,0 +1 @@
		export const isEmptyString = (value: string) => value.length === 0;

		@@ -0,0 +1 @@
		export const isNumeric = (value: string) => /^[1-9]+\d*$/.test(value);

		@@ -0,0 +1,3 @@
		export const isValidMaxLength = (value: string, max: number) => {
		return value.length <= max;


		const useFormInput = <T extends object>(initialState: T) => {
		export type FormErrorType = {

		Object.keys(validations).forEach((key) => {
		const result = validations[key](String(getNestedValue(formState, key)));

[feat/CK-147] 골룸 생성 페이지 고도화 및 유효성 검사를 구현한다 #114

[feat/CK-147] 골룸 생성 페이지 고도화 및 유효성 검사를 구현한다 #114

Conversation

jw-r commented Aug 14, 2023

📌 작업 이슈 번호

✨ 작업 내용

💬 리뷰어에게 남길 멘트

sh981013s left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NaveOWO left a comment

Choose a reason for hiding this comment

sh981013s left a comment

Choose a reason for hiding this comment

sh981013s left a comment •

edited

Loading